﻿@page "/onscreenkeyboards"
@namespace BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<OnScreenKeyboards> Localizer

<h3>@Localizer["Title"]</h3>

<p><b>@Localizer["P1"] ：</b></p>

<p>@((MarkupString)Localizer["P2"].Value)</p>

<p><b>@Localizer["P3"]</b></p>

<p>@((MarkupString)Localizer["P4"].Value)</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.SignaturePad</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.SignaturePad" /&gt;</Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.SignaturePad</Pre>

<p><b>@Localizer["P6"]</b></p>
<div class="code-label">Razor</div>
<Pre class="no-highlight">1. &lt;OnScreenKeyboard /&gt;</Pre>
<Pre class="no-highlight">2. &lt;input class="virtualkeyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" /&gt;</Pre>

<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BlockKeyboardTypeAllTitle"]" Name="Normal">
    <OnScreenKeyboard ClassName="@ClassName" KeyboardKeys="KeyboardKeysType.english" />
    <input class="form-control @ClassName"
           data-kioskboard-type="@KeyboardType.all.ToString()"
           data-kioskboard-specialcharacters="true"
           placeholder='@Localizer["BlockKeyboardTypeAllTitle"]' />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockKeyboardTypekeyboard"]" Introduction="" Name="BlockKeyboardTypekeyboard">
    <input class="form-control @ClassName"
           data-kioskboard-type="@KeyboardType.keyboard.ToString()"
           data-kioskboard-placement="@KeyboardPlacement.bottom.ToString()"
           placeholder='@Localizer["BlockKeyboardTypekeyboard"]' />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockKeyboardTypeNumpadTitle"]" Introduction="" Name="BlockKeyboardTypeNumpadTitle">
    <input class="form-control @ClassName"
           data-kioskboard-type="@KeyboardType.numpad.ToString()"
           data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
           placeholder='@Localizer["BlockKeyboardTypeNumpadTitle"]' />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockKeyboardThemeDarkTitle"]" Introduction="" Name="BlockKeyboardThemeDarkTitle">
    <input class="form-control @ClassName1"
           data-kioskboard-type="@KeyboardType.keyboard.ToString()"
           placeholder='@Localizer["BlockKeyboardThemeDarkTitle"]' />
    <OnScreenKeyboard ClassName="@ClassName1" Option="Option1" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockSpecialcharactersTitle"]" Introduction="" Name="BlockSpecialcharactersTitle">
    <input class="form-control @ClassName2"
           data-kioskboard-specialcharacters="true"
           placeholder='@Localizer["BlockSpecialcharactersTitle"]' />
    <OnScreenKeyboard ClassName="@ClassName2" Option="Option2" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockSpecialcharactersCustomerTitle"]" Introduction="[- + =]" Name="BlockSpecialcharactersCustomerTitle">
    <input class="form-control @ClassName3" data-kioskboard-specialcharacters="true" placeholder='@Localizer["BlockSpecialcharactersCustomerTitle"]' />
    <OnScreenKeyboard ClassName="@ClassName3" Option="Option3" />
Pre>
</DemoBlock>

<DemoBlock Title="@Localizer["BBUsageText"]" Introduction="" Name="App">
    <p>@Localizer["BBUsage2Text"]</p>

    <OnScreenKeyboard ClassName="@ClassNameBB" Option="OptionBB" />
    <div class="form-control textarea-demo"> @BindValue</div>
    <p>BootstrapInput</p>
    <BootstrapInput class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="BootstrapInput" @bind-Value="@BindValue" />
    <p>BootstrapPassword</p>
    <BootstrapPassword class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="BootstrapPassword" @bind-Value="@BindValue" />
    <p>Textarea</p>
    <Textarea class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="Textarea" rows="4" @bind-Value="@BindValue" />
</DemoBlock>

<Tips class="mt-3">
    <p><b>@Localizer["Tips"] ：</b></p>
    <p>@((MarkupString)Localizer["P5"].Value)</p>
</Tips>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Items="@GetKeyboardOptionAttributes()" Title="KeyboardOption" />

<AttributeTable Items="@GetKeyboardEnumAttributes()" Title="KeyboardEnum" />
